<template>
  <div class="home">
    <!-- banner -->
    <div class="header">
      <img
        src="https://static.xuantong.cn/images/wapindex/home_banner_bg_im.png"
        alt=""
      />
      <div class="logo">
        <div class="logo-left">
          <img
            src="https://static.xuantong.cn/logo/logo_no_slogn_im.png"
            alt=""
          />
          <img
            src="https://static.xuantong.cn/images/wapindex/10th_logo_imnor.png"
            alt=""
          />
        </div>
        <div class="logo-right">
          <img
            src="https://static.xuantong.cn/images/wapindex/home_service_ic.png"
            alt=""
          />
          <p>暄桐客服</p>
        </div>
      </div>
      <div class="banner-words">
        <img src="@/assets/images/home_banner_im.png" alt="" />
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="pic in res.hotCourse"
          :key="pic.courseId"
          @click="router.push(`/swiperInfo?id=${pic.courseId}`)"
        >
          <div class="s-pic">
            <img :src="pic.courseCoverImg" alt="" />
            <div class="swiper-con">
              <h3>{{ pic.courseTitle }}</h3>
            </div>
          </div>

          <div class="s-Title">
            <p v-if="pic.isGroup" style="background: #e0bf95;">开课中</p>
            <p v-else style="background: #d9a8a8;">转报全阶</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 所有课程 -->
    <div class="allCourse">
      <div class="course-title">
        <h3>所有课程</h3>
        <p @click="go">查看全部</p>
      </div>
      <div class="course">
        <div class="course-one" v-for="item in res.list" :key="item.id">
          <div class="contentTit">
            <img class="img-text" :src="item.coursePeople" alt="" />
            <div class="text">
              <p>{{ item.coursePeopleSay }}</p>
              <img :src="item.coursePeopleType" alt="" />
            </div>
          </div>
          <div class="childImg">
            <div v-for="img in item.courseChildren" :key="img.id">
              <img :src="img.coverImg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 直播课 -->
    <div class="liveCourse">
      <div class="liveCourse-title">
        <h3>直播课</h3>
        <p @click="to(1, 1)">更多</p>
      </div>
      <div class="liveCourse-con" @click="detailsLive">
        <div class="live-wrap" v-for="item in res.liveCourse" :key="item.id">
          <img :src="item.courseCoverImgH5" alt="" />
          <div class="live-text">
            <div class="live-tit">
              <span>{{ item.courseContentType }}</span>
              <h4>{{ item.courseTitle }}</h4>
            </div>
            <p>共{{ item.courseCount.toString().slice(0, 3) }}课</p>
            <div class="live-price">
              <p :class="item.courseEndTime > timer ? 'active1' : 'active2'">
                {{ item.courseEndTime > timer ? "开课中" : "已结课" }}
              </p>
              <span>{{ item.coursePrice }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 教练日常 -->
    <div class="liveCourse">
      <div class="liveCourse-title">
        <h3>教练日常</h3>
        <p @click="to(2, 1)">更多</p>
      </div>
      <div class="liveCourse-con">
        <div class="live-wrap" v-for="item in res.dayCourse" :key="item.id">
          <img :src="item.courseCoverImgH5" alt="" />
          <div class="live-text">
            <div class="live-tit">
              <span>{{ item.courseContentType }}</span>
              <h4>{{ item.courseTitle }}</h4>
            </div>
            <p>共{{ item.dayCount }}天</p>
            <div class="live-price">
              <p :class="item.courseEndTime > timer ? 'active1' : 'active2'">
                {{ item.courseEndTime > timer ? "开课中" : "敬请期待~" }}
              </p>
              <span>{{ item.coursePrice.toString().slice(0, 3) }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 书画展览 -->
    <div class="shows">
      <div class="shows-tit">
        <h3>书画展览</h3>
        <p @click="to(3, 1)">更多</p>
      </div>
      <div class="shows-con">
        <div class="shows-wrap" v-for="item in res.shows" :key="item.id">
          <div class="posit">
            <img :src="item.showCover" alt="" />
            <p
              v-if="item.showVoteEndTime < timer"
              style="background: rgb(205, 186, 167)"
            >
              观展
            </p>
            <p
              v-else-if="item.showReadyEndTime < timer"
              style="background: rgb(177, 169, 166)"
            >
              备展结束
            </p>
            <p
              v-else-if="item.showReadyEndTime > timer"
              style="background: rgb(178, 185, 157)"
            >
              备展中
            </p>
          </div>
          <div class="shows-title">
            <span>{{ item.showContentType }}</span>
            <h4>{{ item.showTitle }}</h4>
          </div>
          <div class="shows-free">
            <p>共{{ item.showCount }}关</p>
            <p>免费</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 暄桐同学 -->
    <div class="classmates">
      <h3>暄桐同学</h3>
      <div class="classmates-wrap">
        <div
          class="classmates-con"
          v-for="item in res.classmates"
          :key="item.id"
        >
          <img :src="item.img_b" alt="" />
          <p>{{ item.nickname }}</p>
          <p>{{ item.from }}</p>
        </div>
      </div>
    </div>
    <!-- 公开课 -->
    <div class="recommend">
      <div class="recommend-title">
        <h3>公开课</h3>
        <p @click="open">更多</p>
      </div>
      <div class="recommend-con">
        <div
          class="recomment-wrap"
          v-for="item in res.recommend"
          :key="item.id"
        >
          <img :src="item.videoCoverUrl" alt="" />
          <div class="text-look">
            <div class="text-">
              <h4>{{ item.title }}</h4>
              <p>{{ item.summary }}</p>
              <div class="look-con">
                <div class="look-con-one">
                  <img
                    src="https://static.xuantong.cn/images/wapindex/amount_of_play_ic.png?v=1231"
                    alt=""
                  />
                  <span>{{ item.viewCount }}</span>
                </div>
                <div class="look-con-two">
                  <img
                    src="https://static.xuantong.cn/images/wapindex/give_a_like_ic.png"
                    alt=""
                  />
                  <span>{{ item.likeCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 文章分享 -->
    <div class="article">
      <div class="article-title">
        <h3>文章分享</h3>
        <p @click="article">更多</p>
      </div>
      <div class="article-con">
        <div class="article-wrap" v-for="item in res.article" :key="item.id">
          <img :src="item.originalUrl" alt="" />
          <div class="sharing">
            <img
              src="https://static.xuantong.cn/images/wapindex/home_wf_title_im.png"
              alt=""
            />
            <h4>{{ item.title }}</h4>
            <p>{{ item.intro }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 暄桐文房 -->
    <div class="xt-wenfang">
      <h3>暄桐文房</h3>
      <div class="wenfang-box">
        <img
          src="./../assets/images/wf_banner_im.png"
          alt=""
          class="img-banner"
        />
        <img
          src="./../assets/images/home_wf_monky_ele.png"
          alt=""
          class="img-top"
        />
        <img
          src="./../assets/images/home_wf_monkey_im.png"
          alt=""
          class="img-bottom"
        />
        <img
          src="./../assets/images/home_wf_slogn_im.png"
          alt=""
          class="img-words"
        />
      </div>
      <div class="xt-classroom">
        <div class="video-box">
          <img
            src="./../assets/images/home_classroom_im.png"
            alt=""
            class="video-title"
          />
          <video
            ref="videoPlayer"
            preload="true"
            width="335"
            height="189"
            controls
            perload="auto"
            poster="https://static.xuantong.cn/images/home_vid_poster.jpg"
            src="https://static.xuantong.cn/video/1.mp4"
            class="video"
          ></video>
        </div>
        <div class="bofang" @click="bf" v-show="isshow">
          <img
            src="https://static.xuantong.cn/images/wapindex/about_play_ic.png"
            alt=""
          />
        </div>
        <img
          src="./../assets/images/home_about_im.png"
          alt=""
          class="img-bottom"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;

let res = reactive({
  hotCourse: [],
  list: [], // 所有课程
  liveCourse: [], // 直播课
  dayCourse: [], // 教练日常
  shows: [], // 书画展览
  classmates: [], // 暄桐同学
  recommend: [], // 公开课
  article: [], // 文章分享
});
// 获取当前的时间戳
let timer = +new Date();
// console.log(timer);

/* 进度条 */
// const onChange = (index) => {
//   chnagdu.value = (index + 1) * 33.333;
//   triggerRef(chnagdu);
// };
/* 播放 */
let videoBtn = reactive({});
let isshow = ref(true);
const bf = () => {
  isshow.value = false;
  videoBtn.play();
};
onMounted(() => {
  videoBtn = getCurrentInstance().refs.videoPlayer;
  console.log(videoBtn);
});

/* 所有课程路由跳转*/
const router = useRouter(); //
let go = () => {
  router.push({
    name: "CourseInfo",
  });
};
/* (更多跳转) 相同API不同参数的详情页跳转 */
let to = function (title, cla) {
  router.push(`/CourseInfo?type=${title}&class=${cla}`);
};
/* 遍历的每条信息的详情页跳转 */
let detailsLive = () => {
  router.push({
    name: "DetailsCourse",
  });
};

/* 公开课详情路由跳转 */
let open = () => {
  router.push({
    name: "OpenInfo",
  });
};
/* 文章分享*/
let article = () => {
  router.push({
    name: "ArticleInfo",
  });
};
$axios("xuantong/mocks/home.new.json?t=1662460662067", "GET").then((data) => {
  // console.log(data.data);
  res.hotCourse = data.data.hotCourse;
  // console.log(res.hotCourse); // 轮播图
  res.list = data.data.classify;
  // console.log(res.list);  // 所有课程
  res.liveCourse = data.data.liveCourse;
  // console.log(res.liveCourse);  // 直播课
  res.dayCourse = data.data.dayCourse;
  // console.log(res.dayCourse);  // 教练日常
  res.shows = data.data.shows;
  // console.log(res.shows);  // 书画展览
  res.classmates = data.data.classmates;
  res.classmates.sort(() => {
    // 随机刷新页面排序再赋值给自己
    return Math.random() - 0.5;
  });
  res.classmates = res.classmates.slice(0, 10);
  // console.log(res.classmates);  // 暄桐同学
});

$axios("/apixt/core/api/videoshares/recommend?page=1&pageSize=10", "GET").then(
  (data) => {
    res.recommend = data.data.slice(0, 3);
    // console.log(res.recommend);  // 公开课
  }
);
$axios("/apixt/core/api/articles/recommend", "GET").then((data) => {
  res.article = data.data;
  // console.log(res.article);  // 文章分享
});
</script>
<style lang="less">
.home {
  height: calc(100vh - 50px);
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  /* banner */
  .header {
    position: relative;
    img {
      width: 100%;
      height: 410px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
    }
    .logo {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      position: absolute;
      top: 20px;
      left: 0;
      right: 0;
      .logo-left {
        display: flex;
        align-items: center;
        img {
          &:nth-child(1) {
            width: 54px;
            height: 30px;
          }
          &:nth-child(2) {
            width: 26px;
            height: 15px;
            margin-left: 5px;
          }
        }
        // img:nth-child(1) {
        //   width: 54px;
        //   height: 30px;
        // }
        // img:nth-child(2) {
        //   width: 26px;
        //   height: 15px;
        //   margin-left: 5px;
        // }
      }
      .logo-right {
        display: flex;
        img {
          width: 17px;
          height: 15px;
        }
        p {
          font-size: 12px;
          color: #fff;
          margin-left: 5px;
        }
      }
    }
    .banner-words {
      position: absolute;
      top: 100px;
      left: 0;
      img {
        width: 150px;
        height: 38px;
        padding-left: 20px;
      }
    }
  }
  /* 轮播图 */
  .swiper {
    position: relative;
    top: -240px;
    .van-swipe-item {
      .s-pic {
        margin: auto;
        width: 311px;
        img {
          width: 311px;
          height: 192px;
          box-sizing: border-box;
          border-radius: 10px 10px 0 0;
          display: block;
        }
        .swiper-con {
          width: 311px;
          height: 144px;
          background-color: salmon;
          border-radius: 0 0 10px 10px;
          overflow: hidden;
          h3 {
            letter-spacing: 1px;
            text-align: center;
            margin-top: 10px;
          }
        }
      }
      .s-Title {
        p {
          position: relative;
          top:-21px;
          left:50%;
          transform: translateX(-50%);
          width: 211px;
          height: 43px;
          line-height: 43px;
          text-align: center;
          color: #fff;
          border-radius: 8px;
          font-weight: bold;
        }
      }
    }
  }
  /* 所有课程 */
  .allCourse {
    margin-top: -220px;
    .course-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      h3 {
        font-weight: 700;
        color: #333;
        font-size: 18px;
        background-image: url("https://static.xuantong.cn/images/wapindex/home_all_course_ele.png");
        background-repeat: no-repeat;
        background-size: 100% 50%;
        background-position: 0 18px;
      }
      p {
        font-size: 14px;
        color: #696f8c;
      }
    }
    .course {
      margin-bottom: 40px;
      .course-one {
        margin-top: 20px;
        padding: 0 20px;
        .contentTit {
          display: flex;
          .img-text {
            width: 35px;
            height: 40px;
          }
          .text {
            margin-left: 5px;
            p {
              font-weight: 700;
              font-size: 12px;
              color: #333;
            }
            img {
              width: 46px;
              height: 19px;
            }
          }
        }
        .childImg {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          img {
            width: 158px;
            height: 79px;
            margin-top: 10px;
          }
        }
      }
    }
  }
  /* 直播课 */
  .liveCourse {
    background-image: url("https://static.xuantong.cn/images/wapindex/home_live_ele01.png");
    background-position: 100% 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #ede5dd;
    .liveCourse-title {
      padding: 30px 20px 20px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-weight: 700;
        color: #333;
        font-size: 18px;
      }
      p {
        font-size: 14px;
        color: #696f8c;
      }
    }
    .liveCourse-con {
      padding: 0 25px;
      .live-wrap {
        width: 325px;
        height: 120px;
        background-color: #fff;
        margin-top: 20px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 15px 10px;

        display: flex;
        align-items: center;
        img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
        }
        .live-text {
          width: calc(325px - 80px);
          height: 100%;
          margin-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10px 0;
          box-sizing: border-box;
          .live-tit {
            display: flex;
            align-items: center;
            span {
              display: block;
              width: 26px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              border-radius: 5px;
              background-color: #ad9174;
              font-size: 10px;
              color: #fff;
            }
            h4 {
              font-weight: 600;
              color: #181c25;
              font-size: 12px;
              margin-left: 10px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          p {
            font-weight: 400;
            color: #b0b0b0;
            font-size: 12px;
          }
          .live-price {
            display: flex;
            justify-content: space-between;
            p {
              min-width: 50px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              font-size: 10px;
              background-color: #f9f5f2;
              border-radius: 5px;
              &.active1 {
                background: rgba(173, 129, 83, 0.08);
                color: #ad8153;
              }
              &.active2 {
                color: #888;
                background: hsla(0, 0%, 53.3%, 0.08);
              }
            }
            span {
              color: #181c25;
              font-weight: 400;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  /* 书画展览 */
  .shows {
    .shows-tit {
      padding: 0 20px;
      padding: 30px 20px 20px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-weight: 700;
        color: #333;
        font-size: 18px;
      }
      p {
        font-size: 14px;
        color: #696f8c;
      }
    }
    .shows-con {
      padding: 0 24px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .shows-wrap {
        .posit {
          position: relative;
          border-radius: 5px;
          img {
            width: 155px;
            height: 96px;
            border-radius: 5px;
            display: block;
          }
          p {
            width: 100%;
            border-radius: 0 0 5px 5px;
            text-align: center;
            position: absolute;
            bottom: 0;
            color: #fff;
            font-size: 12px;
            height: 23px;
            line-height: 23px;
          }
        }
        .shows-title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          display: flex;
          align-items: center;
          span {
            border: 0.02667rem solid #ad9174;
            color: #ad9174;
            font-size: 10px;
            width: 25px;
            height: 15px;
            line-height: 15px;
            text-align: center;
          }
          h4 {
            color: #181c25;
            font-weight: 550;
            font-size: 14px;
            margin-left: 10px;
          }
        }
        .shows-free {
          width: 100%;
          height: 25px;
          line-height: 25px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          margin-bottom: 15px;
          p:nth-child(1) {
            color: #bbb;
          }
          p:nth-child(2) {
            color: #333;
          }
        }
      }
    }
  }
  /* 暄桐同学 */
  .classmates {
    width: 100vw;
    overflow-x: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    h3 {
      padding: 20px;
      font-style: 18px;
    }
    .classmates-wrap {
      display: flex;
      .classmates-con {
        margin-left: 10px;
        img {
          width: 124px;
          height: 124px;
          border-radius: 10px;
        }
        p {
          &:nth-child(2) {
            color: #333;
            font-size: 12px;
            text-align: center;
            margin-top: 5px;
          }
          &:nth-child(3) {
            color: #888;
            font-size: 10px;
            width: 124px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-top: 5px;
          }
        }
      }
    }
  }
  /* 公开课 */
  .recommend {
    background-image: url("https://static.xuantong.cn/images/wapindex/home_public_class_ele.png");
    background-position: right 0;
    background-repeat: no-repeat;
    background-size: 50% auto;
    .recommend-title {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      h3 {
        font-weight: 700;
        color: #333;
        font-size: 18px;
      }
      p {
        font-size: 14px;
        color: #696f8c;
      }
    }
    .recommend-con {
      .recomment-wrap {
        display: flex;
        justify-content: space-between;
        padding: 10px 25px;
        img {
          width: 140px;
          height: auto;
          border-radius: 10px 0 0 10px;
        }
        .text-look {
          width: 100%;
          background-color: #eee;
          border-radius: 0px 10px 10px 0px;
          .text- {
            height: 65px;
            padding: 20px;
            h4 {
              width: 140px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              color: #181c25;
              font-size: 14px;
              font-weight: 550;
              height: 20px;
              line-height: 20px;
            }
            p {
              width: 140px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 11px;
              color: #44536a;
              height: 15px;
              line-height: 15px;
              margin-top: 5px;
            }
            .look-con {
              color: #696f8c;
              font-size: 10px;
              display: flex;
              margin-top: 15px;
              .look-con-one {
                display: flex;
                align-items: center;
                img {
                  width: 12px;
                  height: 12px;
                }
              }
              .look-con-two {
                display: flex;
                align-items: center;
                margin-left: 30px;
                img {
                  width: 12px;
                  height: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
  /* 文章分享 */
  .article {
    .article-title {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      h3 {
        font-weight: 700;
        color: #333;
        font-size: 18px;
      }
      p {
        font-size: 14px;
        color: #696f8c;
      }
    }
    .article-con {
      display: flex;
      width: 100vw;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .article-wrap {
        margin-left: 20px;
        // position: relative;
        img {
          width: 222px;
          height: 137px;
          border-radius: 10px;
        }
        .sharing {
          position: relative;
          bottom: 40px;
          left: 30px;
          // right: 0;
          width: 174px;
          height: 80px;
          background: url(https://static.xuantong.cn/images/wapindex/home_wf_bg_im.png)
            no-repeat;
          background-size: 100% auto;
          box-sizing: border-box;
          padding: 20px 10px 0 10px;
          img {
            width: 26px;
            height: 26px;
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translate(-50%);
          }
          h4 {
            font-size: 12px;
            font-weight: normal;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #888;
            font-size: 10px;
            margin-top: 5px;
          }
        }
      }
    }
  }
  /* 暄桐文房 */
  .xt-wenfang {
    margin-top: 20px;
    h3 {
      padding: 0 20px;
      font-weight: 700;
      color: #333;
      font-size: 18px;
    }
    .wenfang-box {
      padding: 20px 0 40px 0;
      position: relative;
      img {
        display: block;
        margin: 0 auto;
        width: 325px;
        height: 123px;
        &:nth-child(2) {
          width: 54px;
          height: 61px;
          position: absolute;
          right: 40px;
          top: -5px;
        }
        &:nth-child(3) {
          width: 65px;
          height: 65px;
          position: absolute;
          bottom: 7px;
          left: 20px;
        }
        &:nth-child(4) {
          width: 100px;
          height: 15px;
          position: absolute;
          left: 90px;
          bottom: 44px;
        }
      }
    }
    .xt-classroom {
      margin-top: 20px;
      position: relative;
      .video-box {
        width: 375px;
        height: 188px;
        background: #bda893;

        .video-title {
          width: 135px;
          height: 30px;
          position: absolute;
          top: 30px;
          left: 120px;
        }
        video {
          width: 335px;
          position: absolute;
          top: 88px;
          left: 20px;
          border-radius: 15px;
        }
      }
      .bofang {
        width: 50px;
        height: 50px;
        background: #fff;
        opacity: 0.96;
        position: absolute;
        top: 156px;
        left: 163px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        img {
          width: 10px;
          height: 11px;
          transform: translate3d(2, 0, 0);
        }
      }
      .img-bottom {
        margin-top: 40px;
        display: block;
        width: 375px;
        height: 915px;
      }
    }
  }
}
</style>
